<template>
	<ul>
		<li v-for="(item,i) of navData" class="tabItem" :key="i" @click.native="linkLive" :class="{'router-link-active':myPath===item.url}">
			<template v-if="item.hasRouter">
				<a href="javascript:void(0)" @click="goFullView(item.url)">
					<div :class='item.iconClass'></div>
					<p class=" nav-icon-title">{{ item.title}}</p>
				</a>
			</template>
			<template v-else>
				<li id="middle-logo">
					<img class="nav3" :src="sysInfo.icon +'?x-oss-process=image/resize,m_fixed,h_80,w_80'">
				</li>
			</template>
		</li>
	</ul>
</template>
<script>
	import fun from "../../util/function"
	export default {
		data() {
			return {
				myPath: '', //路由地址 url
				navData: [{
						url: 'zhxykHome',
						iconClass: 'navIconPic_1',
						title: '首页',
						hasRouter: true,
				},
					{
						url: 'my',
						iconClass: 'navIconPic_5',
						title: '我的',
						hasRouter: true
					}
				]
			}
		},
		mounted() {
			// 初始化页面navTab高亮显示
			this.myPath = this.$route.path.split('/')[2];
		},
		watch: {
			// 监听路由navTab高亮显示
			$route(to, from) {
				this.myPath = to.path.split('/')[2];
			}
		},
		props: {},
		computed: {
			sysInfo() {
				return this.$store.state.SysOrgInfo;
			}
		},
		methods: {
			linkLive() {
				this.$store.state.liveNavCur = 1;
			},
			goFullView(url) {
				if(this.$store.state.isYk && url == 'mine') { //游客
					    let jointUrl = fun.getCurPageUrl('home')
						fun.ykDisposeFun(jointUrl)
						return
				}
				this.$router.push(`/${this.$channel}/${url}`)
			}
		}
	};
</script>
<style scoped="scoped">
	@keyframes keyNavBottom {
		0% {
			transform: scale(1);
		}
		25% {
			transform: scale(1.1);
		}
		50% {
			transform: scale(0.9);
		}
		75% {
			transform: scale(1.1);
		}
		100% {
			transform: scale(1);
		}
	}
	
	#middle-logo {
		width: 80px;
		height: 80px;
	}
	
	.tabItem a {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.router-link-active p {
		color: #D32F2F;
	}
	
	.tabItem div {
		width: 40px;
		height: 40px;
		margin: 0 auto;
		margin-bottom: 10px;
	}
	
	.router-link-active .navIconPic_1 {
		background: url("../../assets/images/zhxyk/home/home_active.png") no-repeat;
		background-size: 40px;
		animation: keyNavBottom 0.3s ease-in;
	}
	
	.navIconPic_1 {
		background: url("../../assets/images/zhxyk/home/home.png") no-repeat;
		background-size: 40px;
	}
	
	.router-link-active .navIconPic_5 {
		background: url("../../assets/images/zhxyk/home/mine_active.png") no-repeat;
		background-size: 40px;
		animation: keyNavBottom 0.3s ease-in;
	}
	
	.navIconPic_5 {
		background: url("../../assets/images/zhxyk/home/mine.png") no-repeat;
		background-size: 40px;
	}
</style>